<template>
  <div class="page">
    <el-card class="card">
      <el-row class="card-content">
        <!--    搜索-->
        <el-col :span="24" class="search-wrapper">
          <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
        </el-col>
        <!--    表格-->
        <el-col :span="24" class="data">
          <el-table :data="data" v-loading="loading" stripe>
            <el-table-column prop="title" label="商品标题" align="center"></el-table-column>
            <el-table-column prop="thumbnail" label="商品封面" align="center">
              <div class="cover">
                <img src="../live/logo1.jpg" style="width:50px;height:50px;"/>
              </div>
            </el-table-column>
            <el-table-column prop="price" label="价格" align="center"></el-table-column>
            <el-table-column prop="link" label="商品外部链接" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click.stop="edit(scope.row)" type="text">编辑</el-button>
                <el-button @click.stop="remove(scope.row.id)" type="text" style="color:red">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager-group">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, jumper, prev, next"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--编辑对话框-->
    <edit @close="closeEdit" :product-id="id" :is-edit="isEdit" :row-data="rowData"></edit>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import Edit from '@/framework/components/dialog/goods/list/edit.vue'
import PageMixin from '@/framework/mixins/pageMixin'
import {count,find,batchDelete} from '@/project/service/product'

export default {
  name: "list",
  mixins: [
    PageMixin,
  ],
  data(){
    return{
      searchItems: [{name: '商品标题', key: 'title', type: 'string'}],
      data:[
        // {title:'衬衫布料',cover:'888',price:'9.9',link:'https://www.taobao.com'},
        // {title:'棉衣布料',cover:'888',price:'29.9',link:'https://www.taobao.com'},
        // {title:'帆布布料',cover:'888',price:'19.9',link:'https://www.taobao.com'},
      ],
      isEdit: false,//是否编辑商品
      id:'',
      rowData: {},//行数据
      loading: true
    }
  },
  components: { Search, Edit },
  created(){
    this.listUpdate()
  },
  methods:{
    //获取直播间列表
    search(obj,type){
      find(obj,data => {
        console.log(data)
        this.data = data
        this.loading = false
        if(type=='search'){
          this.$message.success('查询成功')
        }
      })
    },
    // 统计直播间列表
    getCount(title){
      // console.log(title,status)
      //条件搜索
      if(title){
        count({product:{title}},data => {
          this.total = data
        })
      }else{
        count({},data => {
          this.total = data
        })
      }
    },
    //直播间列表更新
    listUpdate(){
      let listParam = {
        product:{},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(listParam)
      this.getCount()
    },
    //条件搜索
    searchBySearchItem(res){
      this.loading = true
      let param = {
        product:{title:res.title},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(param,'search')
      this.getCount(res.title)
    },
    //编辑
    edit(rowData){
      this.isEdit = true
      this.rowData = rowData
    },
    //关闭编辑
    closeEdit(isEdit){
      this.isEdit = false
    },
    //删除
    remove(id){
      this.$confirm('删除后不可恢复，是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        id = id.toString()
        batchDelete({idList:[id]},data => {
          if(data == '204'){
            this.$message.success('删除成功')
            this.listUpdate()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
}
</script>

<style lang="less" scoped>
.data{
  margin-top: 20px;

  .pager-group{
    width:100%;
    margin: 20px 0;
  }
}
</style>
